<template>
  <lay-container :fluid="true" style="padding: 10px;padding-top: 10px;">
    <lay-row>
      <lay-col md="24">
        <!---个人动态-->
        <lay-col md="6" style="height: 314px;padding-right:5px;">
          <lay-card style="height: 314px;">
            <template #title>
              <router-link to="/systemlog/log" class="shortcut">
                <lay-icon type="layui-icon-chart" class="ico"></lay-icon> 我的动态
              </router-link>
            </template>
            <lay-timeline-item v-for="item in statistics.logList">
              <template #title>
                {{ item.name }}
              </template>
              <p>
                {{ item.controllerAction }} - {{ item.time }}
              </p>
            </lay-timeline-item>
          </lay-card>
        </lay-col>
        <!---系统统计-->
        <lay-col md="12">
          <lay-col md="8">
            <lay-card class="mycon" shadow="hover">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-read" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/cms/content/list" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.content" :decimalPlaces="0">
                      </lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">内容数</li>
                </ul>
              </div>
            </lay-card>
          </lay-col>
          <lay-col md="8">
            <lay-card class="mycon">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-username" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/auth/user" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.user" :decimalPlaces="0"></lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">用户数</li>
                </ul>
              </div>
            </lay-card>
          </lay-col>
          <lay-col md="8">
            <lay-card class="mycon">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-time" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/systemlog/log" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.log" :decimalPlaces="0"></lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">日志数</li>
                </ul>
              </div>
            </lay-card>
          </lay-col>
          <lay-col md="8">
            <lay-card class="mycon">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-notice" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/notice/getlist" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.notice" :decimalPlaces="0">
                      </lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">消息数</li>
                </ul>
              </div>
            </lay-card>
          </lay-col>

          <lay-col md="8">
            <lay-card class="mycon">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-android" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/oas/member/list" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.member"
                        :decimalPlaces="0"></lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">人员数</li>
                </ul>
              </div>
            </lay-card>
          </lay-col>

          <lay-col md="8">
            <lay-card class="mycon">
              <div class="statistics-body">
                <ul>
                  <li>
                    <lay-icon type="layui-icon-windows" class="ico"></lay-icon>
                  </li>
                  <li class="num">
                    <router-link to="/oas/doc/post/list" class="shortcut">
                      <lay-count-up :startVal="0" :endVal="statistics.countAll.docPost"
                        :decimalPlaces="0"></lay-count-up>
                    </router-link>
                  </li>
                  <li class="tip">发文数</li>
                </ul>
              </div>

            </lay-card>
          </lay-col>

        </lay-col>
        <!---信息-->
        <lay-col md="6" style="height: 314px;padding-left:5px;">
          <lay-card style="height: 314px;">
            <template #title>
              <router-link to="/notice/getlist" class="shortcut">
                <lay-icon type="layui-icon-notice" class="ico"></lay-icon> 我的消息
              </router-link>
            </template>
            <div class="notice">
              <ul>
                <li v-for="item in noticeList">
                  <span class="dot">
                    <lay-badge type="dot" theme="green" v-if="item.status === 1"></lay-badge>
                    <lay-badge type="dot" ripple v-else></lay-badge>
                  </span>
                  <span class="time">{{ dateUtil(item.postTime) }}</span>
                  <span class="title">
                    <a href="javascript:;" @click="read(item.id)" v-if="item.title"> {{ subStrs(item.title) }}</a>
                  </span>
                </li>
              </ul>
            </div>
          </lay-card>
        </lay-col>
      </lay-col>
      <!---发布统计-->
      <lay-col md="24">
        <lay-card>
          <lay-row>
            <lay-col :md="24">
              <div id="main"></div>
            </lay-col>
          </lay-row>
        </lay-card>
      </lay-col>
    </lay-row>

    <lay-row space="10">
      <lay-col md="24">
        <lay-panel>
          <lay-tag> {{ statistics.systemInfo[2] }}</lay-tag>
          运行平台：<lay-tag> {{ statistics.systemInfo[0] }}</lay-tag>
          操作系统： <lay-tag> {{ statistics.systemInfo[1] }}</lay-tag>
        </lay-panel>
      </lay-col>
    </lay-row>

    <lay-layer title="阅读消息" v-model="noticeRead" :resize="true" :shadeClose="false" :closeBtn="false"
      :area="['1200px']">
      <NoticeRead :noticeId="noticeId" v-model="noticeRead"></NoticeRead>
    </lay-layer>

  </lay-container>
</template>

<script lang="ts" setup>
import { nextTick, toRefs, reactive, ref, watch } from "vue";
import { getList } from "../../../api/module/statistics";
import { getNoticeList } from "../../../api/module/notice";
import * as echarts from 'echarts';
import NoticeRead from '../../sys/notice/components/Read.vue'
import Util from '../../../library/Util'

const data = reactive({
  statistics: {
    logList: { targetList: [] as any, },
    forUser: [],
    countAll: {
      content: undefined,
      user: undefined,
      log: undefined,
      notice: undefined,
      member: undefined,
      cmsCat: undefined,
      docPost: undefined,
    },
    systemInfo: []
  },
  queryModel: {
    pageSize: 9,
    pageNum: 1,
    ListType: 1
  }
})

const { statistics, queryModel } = toRefs(data);
const noticeList = ref({ targetList: [] as any, },)

//获取列表
const getNotice = function () {
  getNoticeList(queryModel.value).then((res) => {
    if (res.status == 1) {
      noticeList.value = res.data.data
    }
  })
}
getNotice();
const dateUtil = (time: any) => {
  return Util.formatDate(time, 'MM-dd HH:MM')
}

const subStrs = (str: string) => {
  return Util.subStrs(str, 0, 20)

}

//本年或者本月  "year"or"month  空全部  
getList().then((res) => {
  if (res.status == 1) {
    let data = res.data.countAll
    statistics.value = {
      logList: res.data.logList,
      forUser: res.data.forUser,
      countAll: {
        content: data.content,
        user: data.user,
        log: data.log,
        notice: data.notice,
        member: data.member,
        cmsCat: data.cmsCat,
        docPost: data.docPost,
      },
      systemInfo: res.data.systemInfo
    }

    nextTick(() => {
      let nameMonth = [] as Array<string>;
      let valueMonth = [] as Array<string>;
      let statusNum = [] as Array<string>;
      statistics.value.forUser.forEach(function (item: any) {
        nameMonth.push(item["name"]);
        valueMonth.push(item["value"]);
        statusNum.push(item["status"]);
      });

      const myChart = echarts.init(document.getElementById('main') as HTMLElement);

      myChart.setOption({
        title: [
          {
            text: '本月个人信息报送排名'
          }
        ],

        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          grid: { y2: 140 },
          type: 'category',
          data: nameMonth,
          axisLabel: {
            interval: 0,
            rotate: -30,
            margin: 15
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 条'
          }
        },

        series: [
          {
            name: '发布量',
            type: 'bar',
            data: valueMonth,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
          {
            name: '已发布',
            type: 'bar',
            data: statusNum,
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }

        ]
      })

    })
  }
})



//模态操作 阅读消息
const read = function (id: number) {
  changeVisibleRead(id)
}



let noticeId = ref()  //要进行操作的消息ID
const noticeRead = ref(false)
const changeVisibleRead = function (id: number) {
  noticeRead.value = !noticeRead.value
  noticeId.value = id
  getNotice()//关闭模态后，重新刷新列表
}

watch(noticeRead, (newValue, oldValue) => {
  if (newValue === false) {
    getNotice();
    //console.log('watch 已触发', newValue,oldValue)
  }
})

</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 610px;
}

.shortcut {
  text-align: center;
  color: #31BDEC;
}

.notice {
  width: 100%;
}

.notice li {
  width: 100%;
  line-height: 28px;
  height: 28px;
}

.notice li .dot {
  width: 10px;
  float: left;
}

.notice li .title {
  width: 260px;
  font-size: 14px;
  overflow: hidden;
  line-height: 26px;
  height: 26px;
  float: left;
  padding-left: 5px;
}

.notice li .time {
  float: right;
  font-size: 14px;
}

.mycon {
  margin: 0 5px 10px 5px;
}

.statistics-body {
  padding: 5px;
  text-align: center;
  height: 122px;
}

.statistics-body li {
  text-align: center;
}

.statistics-body .ico {
  color: #31BDEC;
  font-size: 40px;
  height: 50px;
  line-height: 50px;
}

.statistics-body .num {
  color: #31BDEC;
  font-size: 26px;
  height: 50px;
  line-height: 50px;
}

.statistics-body .tip {
  color: gray;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
}
</style>